import React, {useEffect, useState} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {actionsHttp} from '../../store/actions'
import axios from 'axios';
// import Shop from '../Shop'

import Lazy from '../../components/Lazy'
const NewShop = Lazy(() => import('../Shop'))
export function Home() {
    // 获取仓库中的状态
    const num = useSelector((state) => state.num);
    const [isShow, setIsShow] = useState(false)
    // 获取dispatch方法
    const dispatch = useDispatch();

    useEffect(() => {
        const http = async () => {
        //    const data = await axios.get('/list');
        //    console.log(data);
            dispatch(actionsHttp())
        }

        http();
    }, [])
    return (
        <div>
           首页
           {num}
           <button onClick={() => dispatch({type: 'ADD'})}>+</button>
           <button onClick={() => setIsShow(!isShow)}>显示</button>
           {
               isShow ? <NewShop name="zs"></NewShop> : null
           }
           
        </div>
    )
}
